<template>
  <div class="article" v-if="armodel">
    <nav-bar :userImg="model.user_img"></nav-bar>
    <div class="Video">
      <video controls :src="armodel.content"></video>
    </div>
    <div class="articleinfotext">
      <div>
        <span>{{ this.armodel.category.title }}</span>
        <span>{{ this.armodel.name }}</span>
      </div>
      <div>
        <span>{{ this.armodel.userinfo.name }}</span>
        <span>146.4万次观看</span>
        <span>5281弹幕</span>
        <span>{{ this.armodel.date }}</span>
      </div>
      <div>
        <p @click="collectionClick" :class="{activeColor:collectionActive}">
          <van-icon style="font-size: 5.833vw" name="star" />
          <span style="font-size: 3.611vw">收藏</span>
        </p>
        <p @click="subscriptClick" :class="{activeColor:subscritionActive}">
          <van-icon style="font-size: 5.833vw" name="like" />
          <span style="font-size: 3.611vw">关注</span>
        </p>
        <p>
          <van-icon style="font-size: 5.833vw" name="share" />
          <span style="font-size: 3.611vw">分享</span>
        </p>
      </div>
    </div>
    <div class="detail">
      <detail
        class="detailitem"
        v-for="(item, index) in commendList"
        :key="index"
        :detailitem="item"
      />
      <comment-title
        ref="commentIpt"
        @Postcomment="Postsuccess"
        :datalength="this.lens"
      ></comment-title>
      <comment
        @lengtheslect="sendData"
        ref="commentPulish"
        @publishClick="PostChildClick"
      />
    </div>
  </div>
</template>
<script>
import NavBar from "../components/common/NavBar";
import Detail from "./Detail";
import CommentTitle from "../components/article/commentTitle";
import Comment from "../components/article/comment.vue";
export default {
  components: {
    NavBar,
    Detail,
    CommentTitle,
    Comment,
  },
  data() {
    return {
      model: {},
      armodel: null,
      commendList: null,
      myuser: null,
      lens: null,
      Postcom: {
        comment_comnent: "",
        comment_date: "",
        parent_id: null,
        article_id: null,
      },
      collectionActive:null,
      subscritionActive:false,
    };
  },
  methods: {
    async UserinfoData() {
      if (localStorage.getItem("token")) {
        const res = await this.$http.get("/user/" + localStorage.getItem("id"));
        this.model = res.data[0];
      }
    },
    async articleitemData() {
      const res = await this.$http.get("/article/" + this.$route.params.id);
      this.armodel = res.data[0];
      console.log(this.armodel);
      if(this.armodel){
        this.subscritionInit()
      }
    },
    async commentData() {
      const res = await this.$http.get("/commend");
      this.commendList = res.data;
    },
    sendData(data) {
      this.lens = data;
      console.log(this.lens);
    },
    async Postsuccess(res) {
      const date = new Date();
      let m = date.getMonth() + 1;
      let d = date.getDate();
      if (m < 10) {
        m = "0" + m;
      }
      if (d < 10) {
        d = "0" + d;
      }
      let str = `${m}-${d}`;
      this.Postcom.comment_comnent = res;
      this.Postcom.comment_date = str;
      this.Postcom.article_id = Number(this.$route.params.id)
      console.log(this.Postcom);
      const result = await this.$http.post(
        '/comment_post/' + localStorage.getItem('id'),
        this.Postcom
      );
      this.$refs.commentPulish.commentData();
      this.Postcom.parent_id = "";
      if (result.status == 200) {
        console.log(result);
        this.$msg.success("发表成功");
      }
    },
    PostChildClick(id) {
      this.Postcom.parent_id = id;
      this.$refs.commentIpt.focusIpt();
    },
    async collectionClick(){
      if(localStorage.getItem('token')){
        const res = await this.$http.post('/collection/' + localStorage.getItem('id'),{article_id:this.$route.params.id})
        if(res.data.msg == '收藏成功'){
          this.collectionActive = true
        }else{
          this.collectionActive = false
        }
        this.$msg.fail(res.data.msg)
      }
    },
    async collectionInit(){
      if(localStorage.getItem('token')){
        const res = await this.$http.get('/collection/' + localStorage.getItem('id'),{
          params: {
            article_id:this.$route.params.id
          }
        })
        this.collectionActive = res.data.success
      }
    },
    async subscritionInit(){
      if(localStorage.getItem('token')){
        const res = await this.$http.get('/sub_scription/' + localStorage.getItem('id'),{
          params: {
            sub_id:this.armodel.userid
          }
        })
        this.subscritionActive = res.data.success
      }
    },
    async subscriptClick(){
      if(localStorage.getItem('token')){
        const res = await this.$http.post('/sub_scription/' + localStorage.getItem('id'),{sub_id:this.armodel.userid})
        if(res.data.msg == '关注成功'){
          this.subscritionActive = true
        }else{
          this.subscritionActive = false
        }
        this.$msg.fail(res.data.msg)
      }
    },
  },
  created() {
    this.UserinfoData();
    this.articleitemData();
    this.commentData();
    this.collectionInit()
  },
  watch: {
    $route() {
      this.articleitemData();
      this.commentData();
      this.collectionInit()
      this.subscritionInit()
    },
  },
};
</script>
<style lang="scss">
.article {
  overflow: hidden;
  .Video {
    margin: 1.389vw 0;
    width: 100%;
    video {
      width: 100%;
    }
  }
  .articleinfotext {
    padding: 4.167vw;
    div:nth-child(1) {
      span:nth-child(1) {
        padding: 0 2.778vw;
        color: #ff9db5;
        background-color: #f4f4f4;
        border-radius: 2.778vw;
      }
    }
    div:nth-child(2) {
      padding: 3.778vw 2.778vw;
      span {
        margin-right:2.778vw;
        color: #aaa;
        font-size: 3.333vw;
      }
      span:nth-child(1) {
        color: black;
        font-size: 3.889vw;
        padding-right: 2.778vw;
      }
    }
    div:nth-child(3) {
      padding: 0 2.778vw;
      display: flex;
      p {
        color: #757575;
        align-items: center;
        span {
          margin-right: 2.778vw;
        }
      }
      .activeColor{
        color: #fb7299;
      }
    }
  }
  .detail {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background-color: #fff;
    .detailitem {
      margin: 1.389vw 0;
      width: 45%;
    }
  }
}
</style>